<template>
<div>
	
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="店铺">
			    <el-select clearable  v-model="formInline.userId" placeholder="请选择店铺">
			      	<el-option v-for="item in shopList " :key="item.id" :label="item.mallName" :value="item.id"></el-option>
			    </el-select>
			</el-form-item>
			<el-form-item label="订单编号或申报单号">
				<el-input v-model="formInline.orderNo" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item>
			    <el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>

  		<el-table v-loading="loading" :data="tableData"  :stripe="true" :border=true style="width: 100%" >
		    <el-table-column prop="id"  label="订单ID"  width="70"> </el-table-column>
		    <el-table-column  prop="mallName"  label="店铺" width="120"> </el-table-column>
		    <el-table-column prop="orderSn" label="订单编号" width="190"> </el-table-column>
		    <el-table-column prop="orderNo" label="申报订单编号" width="260"> </el-table-column>
		    <el-table-column  prop="stateName"  label="清关状态"  width="100">  </el-table-column>
		    <el-table-column prop="pushStatus" label="推单状态"  width="100">
		      	<template slot-scope="scope">
			        <span style="color:#67C23A;" v-if="scope.row.pushStatus == 1">
			         	成功
			        </span>
			        <span style="color:#F56C6C;" v-else-if="scope.row.pushStatus == 2">
						失败
					</span>
					<span style="color:#F56C6C;" v-else >
						待重推
					</span>
			    </template>
		    </el-table-column>
			<el-table-column prop="waybillPushStatus" label="发货状态" width="100">
		      	<template slot-scope="scope">
			        <span style="color:#67C23A;" v-if="scope.row.waybillPushStatus">
			         	已发货
			        </span> 
					<span style="color:#F56C6C;" v-else >
						未发货
					</span>
			    </template>
		    </el-table-column>
		    <el-table-column  prop="cancelStatus"  label="状态" width="100">
		      	<template slot-scope="scope">
			         <span style="color:#67C23A;" v-if="scope.row.cancelStatus == 0">
			         	正常
			        </span>
			        <span style="color:#F56C6C;" v-else-if="scope.row.cancelStatus == 1">
						已取消
					</span>
					<span style="color:#E6A23C;" v-else-if="scope.row.cancelStatus == 2">
						等待取消
					</span>
			    </template>
		    </el-table-column>
			<el-table-column  prop="createTime"  label="拉单时间" width="140">  </el-table-column>
		    <el-table-column prop="pushTime"   label="推单时间"  width="140"> </el-table-column>
		    <el-table-column  prop="waybillNo" label="运单号" width="140"></el-table-column>
		    <el-table-column prop="logistics" label="物流公司" width="190"></el-table-column>
		    <el-table-column prop="payNo" label="支付单号" width="240"></el-table-column>
		    <el-table-column prop="payType" label="支付方式" width="80"></el-table-column>
		    <el-table-column prop="userName" label="收货人"  width="90"></el-table-column>
		    <el-table-column prop="productAmountTotal" label="商品金额" width="90"></el-table-column>
			<el-table-column prop="payAmount" label="支付金额" width="90"></el-table-column>
		    <el-table-column prop="discountAmount" label="优惠金额" width="90"></el-table-column>
		    <el-table-column prop="logisticsFee"  label="运费" width="90"></el-table-column>
	    	<el-table-column fixed="right" label="操作" width="220">
	    		<template slot-scope="scope">
			        <el-button size="mini"  @click="detail(scope.$index, scope.row)">详情</el-button>
			        <el-button  size="mini"  type="primary"  @click="repush(scope.$index, scope.row)">重推</el-button>
			        <el-button  size="mini"  type="danger"  @click="cancle(scope.$index, scope.row)">取消</el-button>
		      	</template>
	    	</el-table-column>
  		</el-table>
		<div class="block" style="margin-top: 20px;">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="currentPage"
		      :page-sizes="[15, 50, 100, 200]"
		      :page-size="pageSize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="totalRow">
		    </el-pagination>
		</div>
		<el-dialog title="商品详情"  top="30vh"  :visible.sync="dialogTableVisible">
		  <el-table :data="gridData">
		    <el-table-column property="id" label="ID" width="80"></el-table-column>
		    <el-table-column property="goodsName" label="商品名称" ></el-table-column>
		    <el-table-column property="goodsNo" label="货号" width="180" >
		    	<template slot-scope="scope" >
			        <span style="margin-right: 10px">{{ scope.row.goodsNo }}</span>
				  
			        <el-popover
					  placement="top"
					  width="340"
					  @show="getGoodsNo(scope)"
					  v-model="scope.row.visible">
					  		<el-form :inline="true"  class="demo-form-inline">
								<el-form-item style="margin-bottom: 5px;" label="修改货号">
									<el-input size="mini" v-model="goodsNo" placeholder="请输入"></el-input>
								</el-form-item>
								<el-form-item style="margin-bottom: 5px;" >
								    <el-button type="primary" size="mini" @click="updateGoodsNo(scope)">确定</el-button>
								</el-form-item>
							</el-form>
							 <i slot="reference" style="cursor: pointer;" class="el-icon-edit"></i> 
					</el-popover>
					
			    </template>
		    </el-table-column>
		    <el-table-column property="num" label="购买数量" width="100"></el-table-column>
		    <el-table-column property="price" label="单价" width="100"></el-table-column>
		  </el-table>
		</el-dialog>

 
</div>
</template>

<script>
	import {pddOrderPage,shopList,rePushPDD,cancelOrder,getOrderGoods,updateGoods} from '../../api/apis'
	export default {
	    data() {
	      return {
	      	shopList:[],
	      	currentPage:1,
	      	pageSize:15,
	      	totalRow:0,
	      	formInline: {
	          userId: '',
	          orderNo: ''
	        },
	        goodsId:0,
	        goodsNo:"",
	        visible: false,
	      	tableData: [ ],
	        dialogTableVisible: false,
	        gridData: [ ], 
	        loading: true
	      }
	    },
	    methods: {
	    	handleSizeChange(val) {
	    		this.pageSize = val;
	    		this.handleCurrentChange(1);
	        	console.log(`每页 ${val} 条`);
	      	},
	      	handleCurrentChange(val,userId,orderNo) {
	      		this.currentPage = val;
	      		let data = {
	      			page: val,
	      			limit: this.pageSize,
	      			userId:userId,
	      			orderNo:orderNo
	      		}
				this.loading= true;
	      		let that = this;
	      		pddOrderPage(data)
	      			.then(function (res) {
	      				
			        	if(res.status === 200 ){
			        		if(res.data.code == 0){
			        			that.totalRow = res.data.count;
			        			that.tableData = res.data.data;
			        		}else{
			        			that.$message.error(res.data.msg)
			        		}
			        	}
			        	that.loading= false;
					}) ;
	        	console.log(`当前页: ${val}`);
	      	},
	    	detail(index, row) {
	    		let  that = this;
	    		this.dialogTableVisible = true;
	    		let para = {"orderNo":row.orderNo}
				getOrderGoods(para)
					.then(function (res) {
			        	if(res.status === 200 ){
			        		if(res.data.code == 0){
			        			that.gridData = res.data.data;
			        		}else{
			        			that.$message.error(res.data.msg)
			        		}
			        	}
					})
					.catch(function (error) {
					    console.log(error);
					}); 
		    },getGoodsNo(scope){
		    	this.goodsId = scope.row.id;
	      		this.goodsNo = scope.row.goodsNo;
	      		console.log(scope.$index );
	      	},updateGoodsNo(scope){
	      		console.log(scope.row);
	      		console.log(this.goodsNo);
	      		let that = this;
	      		let para = {"id":that.goodsId,"field":"goodsNo","value":that.goodsNo}
				updateGoods(para) 
					.then(function (res) {
			        	if(res.status === 200 ){
			        		if(res.data.code == 0){
			        			scope.row.goodsNo = that.goodsNo
			        			scope.row.visible = false;
			        		}else{
			        			that.$message.error(res.data.msg)
			        		}
			        	}
					})
					.catch(function (error) {
					    console.log(error);
					}); 
		    },
		    cancle(index, row) {
		    	let that = this;
		        console.log(index, row);
		        this.$confirm('确认要取消该订单吗?', '提示', {
		          	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		          	type: 'warning'
		        }).then(() => {
		        	let para = {"orderId":row.id};
					cancelOrder(para)
						.then(function (res) {
				        	if(res.status === 200 ){
				        		if(res.data.code == 0){
				        			 that.$message({
							            type: 'success',
							            message: '已取消!'
							        });
				        			that.handleCurrentChange(that.currentPage); 
				        		}else{
				        			that.$message.error(res.data.msg)
				        		}
				        	}
						})
						.catch(function (error) {
						    console.log(error);
						}); 
		        }).catch(() => {
		          	        
		        });	
		    },
		    repush(index, row) {
		    	let that = this;
		        console.log(index, row);
		        this.$confirm('确认要重推订单吗?', '提示', {
		          	confirmButtonText: '确定',
		          	cancelButtonText: '取消',
		          	type: 'warning'
		        }).then(() => {
		        	let data = {"orderId":row.id}
		        	rePushPDD(data) 
		        		.then(function (res) {
				        	if(res.status === 200 ){
				        		if(res.data.code == 0){
				        			that.$message({
							            type: 'success',
							            message: '重推完成!'
							        });
				        			that.handleCurrentChange(that.currentPage); 
				        		}else{
				        			that.$message.error(res.data.msg)
				        		}
				        	}
						})
						.catch(function (error) {
						    console.log(error);
						});
		        }).catch(() => {
		          	       
		        });	
		    },
	      	onSubmit() {
				this.handleCurrentChange(1,this.formInline.userId,this.formInline.orderNo.trim());
	      	},
	      	getshopList(){
	      		let that = this;
	      		let para = {"type":"拼多多"}
	      		shopList(para)
	      			.then(function (res) {
			        	if(res.status === 200 ){
			        		if(res.data.code == 0){
			        			that.shopList = res.data.data;
			        		}else{
			        			that.$message.error(res.data.msg)
			        		}
			        	}
					})
					.catch(function (error) {
					    console.log(error);
					});
	      	}
	    },
	     created: function () {
	     	this.getshopList();
	     	this.handleCurrentChange(1);
	     }
	}
</script>

<style type="text/css" scoped>
	.back{    
		background: url(../../assets/banner.jpg) repeat;
		width:100%;
		height:100%;
		 
    }
	#subBtn{width:60%;margin-left:-80px;}
	.pad40{
    	padding: 40px;
	}
	.head{
		margin-top: 0px;
    	margin-bottom: 60px;
	}
	.title{	
		position: absolute;
	    font-size: 44px;
	    color: #fff;
	    margin-top: 105px;
	    z-index: 10;
	    text-align: center;
	    width: 100%;
	}  

	 
</style>